<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width:400px;height: 300px;margin: 10px auto;border: solid 1px black;}
    .cont ul{margin: 0;padding: 0;list-style: none;display: flex;width: 400px;height: 30px;line-height: 30px;text-align: center;background: #ccc;}
    .cont ul li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
    .cont ul li.active{background: red;color: #fff;}

    .cont .box>div{width: 400px;height: 270px;display: none;font-size: 50px;}
    .cont .box .msg1{background: #399;display: block;}
    .cont .box .msg2{background: #393;}
    .cont .box .msg3{background: #993;}
    .cont .box .msg4{background: #939;}
  </style>
</head>
<body>
  <div class="cont">
    <ul>
      <li class="active">选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
    </ul>
    <div class="box">
      <div class="msg1">选项1的内容</div>
      <div class="msg2">hello world</div>
      <div class="msg3">哈哈哈</div>
      <div class="msg4">嘿嘿嘿</div>
    </div>
  </div>
</body>
<script>

  // 点击按钮，切换内容
  // 数据：按钮，内容，初始索引
  // 方法：绑定事件，绑定索引，先隐藏之前索引对应的内容，获取当前按钮的索引，根据索引显示对应内容，修改原索引

  function table(){
    this.lis = document.querySelectorAll(".cont ul li");
    this.msgs = document.querySelectorAll(".cont .box>div");
  
    this.index = 0;

    this.addEvent();
    this.addIndex();
  }
  table.prototype.addEvent = function(){
    const that = this;
    for(var i=0;i<this.lis.length;i++){
      this.lis[i].onclick = function(){
        that.hide();
        that.index = that.getIndex(this);
        that.show();
      }
    }
  }
  table.prototype.addIndex = function(){
    for(var i=0;i<this.lis.length;i++){
      this.lis[i].index = i;
    }
  }
  table.prototype.hide = function(){
    this.lis[this.index].className = "";
    this.msgs[this.index].style.display = "none";
  }
  table.prototype.getIndex = function(now){
    return now.index;
  }
  table.prototype.show = function(){
    this.lis[this.index].className = "active";
    this.msgs[this.index].style.display = "block";
  }
  new table();



</script>
</html>